<template>
    <div>
        <h3>合同列表区</h3>
        <el-card >
                <el-row :gutter="20">
                <el-col :span="8">
                     <!-- 双向绑定搜索 -->
                    <!-- <el-input placeholder="请输入内容"  v-model="querInfo.query" clearable @click="getpactList"> 
                    <el-button slot="append" icon="el-icon-search" @click="getpactList"></el-button> -->
                     <el-input placeholder="请输入内容"  v-model="querInfo.query" clearable @click="getpactList"> 
                    <el-button slot="append" icon="el-icon-search" @click="getpactList"></el-button>
                    </el-input>
                </el-col>
                    <el-col :span="4">
                        <el-button type="primary" round @click="dialogVisible = true">添加</el-button>
                    </el-col>

                    <!-- <el-col :span="4">
                        <el-button type="primary" round @click="dialogVisible = true">删除</el-button>
                    </el-col> -->
                </el-row>
                <!-- 合同列表区域 -->
                <!-- <el-table :data = "pactlist" border> -->
                  <el-table :data = "tableData" border>
                    <el-table-column type="index"></el-table-column>
                    <el-table-column label="编号" prop="id"></el-table-column>
                    <el-table-column label="日期" prop="pactday"></el-table-column>
                    <!-- <el-table-column label="合同名字" prop="pactname"></el-table-column> -->
                <el-table-column label="操作">
                   <template slot-scope="scope">
                         <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
                         <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
                  </template>
                   </el-table-column>
                </el-table>

                <el-pagination  background layout="prev, pager, next" page-size="6"  :total="total" @current-change="page">
             </el-pagination>
                <!-- 分页区域 -->
            <!-- <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                 :current-page="querInfo.pagenum" :page-sizes="[50,100]"
                 :page-size="querInfo.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination> -->
            </el-card> 

            <el-dialog title="添加合同" :visible.sync="dialogVisible" width="50%"
            @close="addDialogClosed" >
                <!-- 内容区域 -->
                <!-- <el-form :model="addForm" :rules="addFormRules" ref="addForm" label-width="70px" > -->
                <el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="70px" >
                <el-form-item label="编号" prop="pactid">
               <el-input v-model="addForm.pactid"></el-input>
             </el-form-item>

             <el-form-item label="日期" prop="pactdate">
               <el-input v-model="addForm.pactdate"></el-input>
             </el-form-item>

             <!-- <el-form-item label="合同名字" prop="pactname">
               <el-input v-model="addForm.pactname"></el-input>
             </el-form-item> -->

                </el-form>
                <!-- 底部区域 -->
                 <span slot="footer" class="dialog-footer">
                  <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                 <!-- <el-button type="primary" @click="submitForm('addForm')">确定</el-button> -->
                    </span>
            </el-dialog>
              
        </div>
</template>

<script>
//import { defineComponent } from '@vue/composition-api'
 export default {
     
     data(){
         return{
             querInfo:{
                query: '',
                pagenum: 1,
                // 每页显示多少条数据
                 pagesize: 10
             },
             total: null,
          tableData: null,
              // pactlist:[],
              // total:0,
            //  添加合同对话框的隐藏
             dialogVisible: false,
            //  添加合同的表单数据
             addForm:{
                 pactid:"",
                 pactdate:"",
                //  pactname:""
             },

      addForm: {
       pactid: '',
       pactdate: '',
        // Product_id: '',
        // Product_type: '',
        // Product_amount: '',
        // Product_price: '',
        // Supplier: '',
        // Deliver_date: '',
        // Supply_place: '',
        // Supply_phone: '',
        // Supply_way: '',
        // Supply_name: ''
      },

             addFormRules:{
                 pactid:[
                     { required: true, message: '请输入合同编号', trigger: 'blur' },
                     { min: 1,message: '至少输入一个数字！', trigger: 'blur' }
                 ],
                  pactdate:[
                     { required: true, message: '请输入合同日期', trigger: 'blur' },
                     { min: 1,message: '至少输入一个数字！', trigger: 'blur' }
                 ]
             },   
         }
     }, 
    // created(){
    //     this.getpactList()
    // },
     methods:{
    //  getpactList(){
     
    //  },
     page () {
         const _this = this
         this.axios.post('http://localhost:8081/pact/findall').then((res) => {
           _this.tableData = res.data
            _this.total = res.data
         })
        },
         created () {
    const _this = this
    this.axios.post('http://localhost:8081/pact/findall').then((res) => {
      console.log(res.data)
      _this.tableData = res.data
      // _this.total = res.data.totalElements
    })
    },

     submitForm (formName) {
      const _this = this
      console.log(this.addForm)
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.axios.post('http://localhost:8081/product/add', this.addForm).then(function (res) {
            console.log(res.data)
            // eslint-disable-next-line eqeqeq
            if (res.data.msg == '添加成功') {
              _this.$alert('合同编号为' + _this.addForm.pactid + '添加成功！', '消息', {
                confirmButtonText: '确定',
                callback: action => {
                  _this.$router.push('/contractInformation')
                }
              })
            }
          })
        } else {
          return false
        }
      })
    },
        //  监听分页区域的事件
         handleSizeChange(newSize){
             console.log(newSize)
         },
         handleCurrentChange(newPage){
             console.log(newPage)
         },
        // 监听添加产品对话框的关闭事件
         addDialogClosed(){
             this.$refs.addFormRef.resetFields()
         },

          handleDelete (row) {
      const _this = this
      this.axios.post('http://localhost:8111/pact/delete', { pactid: row.pactid }).then((resp) => {
        _this.$alert('合同编号为' + row.pactid + '删除成功！', '消息', {
          confirmButtonText: '确定',
          callback: action => {
            window.location.reload()
          }
        })
      })
    },
     }
 }
//     data() {
//         return{
//             //获取产品列表的参数对象
//             queryInfo:{
//                 query: '',
//                 // vid: '',
//                 // vprice: '',
//                 // vpdae: '',
//                 // vptype: '',
//                 pagenum: 1,
//                 pagesize: 2
//             }
//         }
//     },
//     created(){
//         this.getproductList()
//     },
//     methods:{
//         async getproductList(){  //优化异步操作
//           const { data: res } = await   this.$http.get('1-4-1',{ 
//               params: this.queryInfo
//             })
//             console.log(res) //把数据打印出来
//         }     
//     }
// }
</script>

<style lang="less" scoped>
</style>